<template>
	<div class="longDetails-pay">
		<div class="history-go">
			<!--<i class="iconfont icon-guanbi"></i>-->
			<img src="../assets/img/close.png" @click="pay_colse"/>
		</div>
		<div class="pay-ment">
			<div class="paym-title">付款方式</div>
			<div class="paym-main">
				<div class="paym-item" v-if="month_price!=0"><span>月付</span><span>{{month_price}}元/月</span></div>
				<div class="paym-other" v-if="month_price!=0"><span>押金：{{month_cash_pledge}}元</span><span>服务费：{{month_service_price}}/月</span></div>
				<div class="paym-item" v-if="qtr_price!=0"><span>季付</span><span>{{qtr_price}}元/月</span></div>
				<div class="paym-other" v-if="qtr_price!=0"><span>押金：{{qtr_cash_pledge}}元</span><span>服务费：{{qtr_service_price}}/月</span></div>
				<div class="paym-item" v-if="half_year_price!=0"><span>半年付</span><span>{{half_year_price}}元/月</span></div>
				<div class="paym-other" v-if="half_year_price!=0"><span>押金：{{half_year_cash_pledge}}元</span><span>服务费：{{half_year_service_price}}/月</span></div>
				<div class="paym-item" v-if="year_price!=0"><span>年付</span><span>{{year_price}}元/月</span></div>
				<div class="paym-other" v-if="year_price!=0"><span>押金：{{year_cash_pledge}}元</span><span>服务费：{{year_service_price}}/月</span></div>
			</div>
		</div>
		<div class="pay-explain">
			<div class="paym-title">说明</div>
			<p>1.押金会在您办理解约时一并返还</p>
			<p>2.解约时，未发生的租金和服务费将按日结算</p>
		</div>
	</div>
</template>

<script>
	export default {
		name: "longDetails_pay",
		data() {
				var that = this;
			return {
				year_price: that.$route.query.year_price,
				half_year_price: that.$route.query.half_year_price,
				qtr_price: that.$route.query.qtr_price,
				month_price: that.$route.query.month_price,

				year_cash_pledge: that.$route.query.year_cash_pledge,
				half_year_cash_pledge: that.$route.query.half_year_cash_pledge,
				qtr_cash_pledge: that.$route.query.qtr_cash_pledge,
				month_cash_pledge: that.$route.query.month_cash_pledge,

				year_service_price: that.$route.query.year_service_price,
				half_year_service_price: that.$route.query.half_year_service_price,
				qtr_service_price: that.$route.query.qtr_service_price,
				month_service_price: that.$route.query.month_service_price,
			}
		},
		mounted() {
		},
		methods:{
			pay_colse(){
				var that = this;
				that.$router.go(-1)
			}
		}
	}
</script>

<style>
	/*@import url("../assets/css/iconfont.css");*/
	
	body {
		background: #fff;
	}
	
	.longDetails-pay {
		width: 100%;
		background: #fff;
		padding: 0 .24rem;
		box-sizing: border-box;
	}
	
	.paym-title {
		font-size: .42rem;
		padding: .2rem 0;
		box-sizing: border-box;
	}
	
	.paym-item {
		display: flex;
		justify-content: space-between;
		padding-top: .2rem;
		box-sizing: border-box;
		font-size: .31rem;
	}
	
	.paym-other {
		display: flex;
		-webkit-flex-wrap: wrap;
		padding: .2rem 0;
		box-sizing: border-box;
		font-size: .28rem;
		color: #999;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	}
	
	.pay-explain>p {
		font-size: .28rem;
		color: #999;
	}
	.paym-main span{
		margin-right: .5rem;
	}
</style>